import Taro, { Component } from '@tarojs/taro'
import { View, Text, ScrollView, Image } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'

import './index.scss'



class Decoration extends Component {
  constructor() {
    super(...arguments)
    this.state = {
      current: 0,
      tabList: [
        { title: '装修日志' },
        { title: '行业资讯' },
        { title: '装修问答' },
        { title: '装修讲坛' }]

    }
  }

  config = {
    navigationBarTitleText: '学装修',
  }

  handleTab(value) {
    this.setState({
      current: value
    })
  }
  toPageFitment() {
    Taro.navigateTo({ url: "/pages/fitmentLog/index" })
  }
  toPagePulpit() {
    Taro.navigateTo({ url: "/pages/pulpitdetail/index" })
  }
  render() {
    const { tabList, current } = this.state;
    return (
      <View className='h-decoration'>
        <AtTabs height='100%' current={current} tabList={tabList} onClick={this.handleTab.bind(this)}>
          <AtTabsPane current={current} index={0} >
            <ScrollView className="scroll" scrollY scrollWithAnimation>
              <View className="log-list">
                {[0, 0, 0, 0, 0, 0, 0].map((item, index) => {
                  return (
                    <View className="log-item" key={index} onClick={this.toPageFitment}>
                      <View className="log-item-img">
                        <Image className="sub-cover" src={require('../../asset/imgs/12.png')} />
                      </View>
                      <View className="log-item-sub">
                        <View className="log-item-title">标题标题标题标题标题标题标题标题标题题标题标题标题标题标题题标题</View>
                        <View className="log-item-user">
                          <Image className="log-item-logo" src={require('../../asset/imgs/12.png')} />
                          <View className="log-item-name">昵称昵称昵称</View>
                        </View>
                      </View>
                    </View>
                  )
                })}
              </View>
            </ScrollView>
          </AtTabsPane>
          <AtTabsPane current={current} index={1}>
            <ScrollView className="scroll" scrollY scrollWithAnimation>
              <View className="industry-list">
                {tabList.map((item, index) => {
                  return (
                    <View className="industry-item" key={index}>
                      <View className="i-item-logo">
                        <Image className="i-img-cover" src={require('../../asset/imgs/12.png')} />
                      </View>
                      <View className="i-item-title">标题标题标题标题标标题标题标题标题标题标题标题标题题标题标题标题标</View>
                      <View className="i-item-time">2018.01.01 12:00</View>
                    </View>
                  )
                })}
              </View>
            </ScrollView>
          </AtTabsPane>
          <AtTabsPane current={current} index={3}>
            <ScrollView className="scroll" scrollY scrollWithAnimation>
              <View className="answer-list">
                {tabList.map((item, index) => {
                  return (
                    <View className="answer-item" key={index}>
                      <Image className="img-wh" src={require('../../asset/imgs/wt.png')} />
                      <View className="a-item-rigth">
                        <View className="a-item-title">
                          标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
                        </View>
                        <View className="a-item-content">问答详情问答详情问答详情问答详情问答详情问答详情问答详情问答详情问答详情问答详情问答详情问答详情问答详情问答详情问答详情……</View>
                        <View className="a-item-sub">
                          <View className="a-item-hd">10个回答</View>
                          <View className="a-item-sr"><Image className="img" src={require('../../asset/imgs/sr.png')} />回答</View>
                        </View>
                      </View>
                    </View>
                  )
                })}

              </View>
            </ScrollView>
          </AtTabsPane>
          <AtTabsPane current={current} index={4}>
            <ScrollView className="scroll" scrollY scrollWithAnimation>
              <View className="industry-list">
                {tabList.map((item, index) => {
                  return (
                    <View className="industry-item" key={index} onClick={this.toPagePulpit}>
                      <View className="i-item-logo">
                        <Image className="i-img-cover" src={require('../../asset/imgs/12.png')} />
                      </View>
                      <View className="i-item-title">标题标题标题标题标标题标题标题标题标题标题标题标题题标题标题标题标</View>
                      <View className="i-item-time">2018.01.01 12:00</View>
                    </View>
                  )
                })}
              </View>
            </ScrollView>
          </AtTabsPane>
        </AtTabs>
      </View>
    )
  }
}

export default Decoration
